/* Eltern-Container definiert die Bezugsebene */
.overlap-wrap {
  position: relative;
  /* Wähle EINE der folgenden Höhen-Varianten: */

/* Variante A: fixe Höhe (einfach) */
  height: 900px;

/* Variante B: responsiv über Seitenverhältnis (moderner) */
/* aspect-ratio: 4 / 3;  /* auskommentiert lassen, wenn du Variante A nutzt */
/* width: 100%; */       /* bleibt in der Spalte */
/* height: auto; */
  overflow: visible;     /* Bilder dürfen überlappen, aber nicht abgeschnitten werden */
}

/* Basisebene (unten) */
.img-base {
  position: absolute;
  top: 30px;
  left: 40px;
  width: 100%;
  z-index: 1;
}

/* Überlagerndes Foto */
.img-top {
  position: absolute;
  top: 500px;
  left: 120px;
  width: 80%;
  z-index: 2;
  /* overflow am IMG selbst hat keine Wirkung – nur Container kann clippen */
}


/* Optional: begrenze, damit nichts in die rechte Spalte ragt */
.overlap-wrap img {
  max-width: 100%;
}

/* Falls dein Spalten-Layout Flex/Grid nutzt: rechte Spalte nicht überdecken lassen */
.right-column { 
  position: relative; 
  z-index: 0; /* oder höher setzen, wenn Bilder drüber liegen */
}


@media (max-width: 768px) {
  .overlap-wrap {
    height: 380px;     /* oder: aspect-ratio verwenden */
  }
  .img-top   { top: 270px; left: 50px; width: 60%; }
  .img-icon  { top: 350px; left: 220px; width: 28%; }
}